page{
    width: 100%;
    height: 100%;
    background: rgba(225, 227, 229, 0.51);
}
.vip_box{
    width: 100%;
    height: 450rpx;
    background-color: #fff;
    
    .vip_head{
        width: 100%;
        height: 273rpx;
        background-color: #000;
        padding: 10rpx 38rpx;
        box-sizing: border-box;
        display: flex;
        justify-content:flex-start ;
        .vip_head_rt{
            max-width: 60%;
            height: 93rpx;
            padding-left: 15rpx;
            box-sizing: border-box;
            .vip_name{
                font-weight: 700;
                font-size: 30rpx;
                line-height: 42rpx;
                color: #FFFFFF;
                max-width: 50%;
            }
            .vip_info{
                font-size: 26rpx;
                line-height: 36rpx;
                color: rgba(204, 205, 206, 0.54);
            }
        }
        .vip_img{
            width: 93rpx;
            height: 93rpx;
            overflow: hidden;
            border-radius: 50%;
            image{
                width: 93rpx;
                height: 93rpx;
            }
        }
    }
    .vip_banner{
        width: 100%;
        padding:0 38rpx;
        box-sizing: border-box;
        transform: translateY(-155rpx);
        image{
            width: 100%;
            height: 316rpx;
            border-radius: 20rpx;
        }
    }
    
}

.vip_power{
    width: 100%;
    padding: 20rpx 40rpx;
    background-color: #fff;
    box-sizing: border-box;
    margin-top: 15rpx;
    margin-bottom: 20rpx;
    .vip_tit{
        width: 100%;
        font-weight: 700;
        font-size: 30rpx;
        line-height: 42rpx;
        color: #292929;
        margin-bottom: 10rpx;
    }
    .vip_item{
        width: 100%;
        height: 114rpx;
        position: relative;
        z-index: 0;
        background-color: transparent;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 17rpx 0; 
        box-sizing: border-box;
        margin-bottom: 20rpx;
        .vip_pay{
            font-weight: 700;
            font-size: 30rpx;
            line-height: 42rpx;
            padding-left: 15rpx;
            box-sizing: border-box;
            /* identical to box height */
            text-align: center;
            color: #AC722A;
            flex: 1;
            border-right:2rpx dashed #D3B683; 
            text{
                font-size: 40rpx;
            }
        }
        .vip_warp{
            flex: 3;
            padding-left: 20rpx;
            box-sizing: border-box;
            .vip_price{
                font-weight: 700;
                font-size: 24rpx;
                line-height: 34rpx;
                text-align: center;
                color: #AC722A;
                text-align: left;
                margin-bottom: 8rpx;
            }
            .vip_mun{
                font-weight: 400;
                font-size: 24rpx;
                line-height: 34rpx;
                text-align: center;
                color: #AC722A;
                text-align: left;
            }
        }
    }
    image{
        width: 100%;
        height: 114rpx;
        position: absolute;
        top:0;
        left: 0;
        z-index: -1;
    }
}
.vip_bean{
    width: 100%;
    padding:20rpx 40rpx;
    box-sizing: border-box;
    background-color: #fff;
    .bean_item{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        height: 200rpx;
        margin-bottom: 20rpx;
       .bean_img{
           width: 200rpx;
           height: 200rpx;
           background: rgba(253, 192, 192, 0.54);
           border-radius: 8rpx;
           overflow: hidden;
           display: flex;
           justify-content: center;
           align-items: center;
           image{
            width: 126rpx;
            height: 73rpx;
           }
       }
       .bean_info{
           flex: 3;
           padding-left: 15rpx;
           padding-top: 15rpx;
           box-sizing: border-box;
           position: relative;
           .bean_name{
            font-weight: 400;
            font-size: 26rpx;
            line-height: 36rpx;
            color: #292929;
           }
           .bean_stock{
            font-weight: 400;
            font-size: 26rpx;
            line-height: 36rpx;
            color: #9A9A9A;
           }
            .bean_drop{
                position: absolute;
                bottom: 10rpx;
                left: 0;
                display: flex;
                width: 100%;
                padding-left: 15rpx;
                box-sizing: border-box;
                justify-content: space-between;
                .bean_mun{
                    font-weight: 400;
                    font-size: 26rpx;
                    line-height: 36rpx;
                    color: #9A9A9A;
                    text{
                        font-weight: 700;
                        font-size: 28rpx;
                        line-height: 39rpx;
                        color: #FF4444;
                    } 
                }
                .bean_btn{
                    width: 101rpx;
                    height: 44rpx;
                    background: #FF4444;
                    border-radius: 4rpx;
                    font-weight: 900;
                    font-size: 28rpx;
                    line-height: 44rpx;    
                    color: #FFFFFF;
                    text-align: center;
                }
            }
        }
    }
}